<template>
  <view class="order-list" v-cloak>
    <view class="home-tabs not-bar">
      <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabsList" :key="idx" @click="handleChangeTabs(idx)">{{item}}</view>
    </view>
    <view class="list-main" v-if="list.length">
      <view class="main-item" v-for="(item,idx) in list" :key="idx">
        <view class="item-header">
          <image :src="item.sellerUserAvatar" mode="aspectFill" class="img"></image>
          <view class="header-h2 dot">{{item.sellerUserName}}</view>
          <view class="header-span" v-if="item.status == 0">
            <view class="span-sub">等待付款</view> {{calcExpireTime(item.orderExpireTime)}}分钟
          </view>
          <view class="header-status" v-else>{{item.statusDesc}}</view>
        </view>
        <view class="item-goods" v-for="goods in item.orderItemInfos" :key="goods.productReleaseVariantId" @click="handleToDetail(item)">
          <image :src="goods.mainImageUrl" mode="aspectFill" class="img"></image>
          <view class="goods-info">
            <view class="h2 dot">{{goods.title}}</view>
            <view class="p">下单时间: {{item.created}}</view>
            <view class="h2">￥{{item.totalPayment}}</view>
          </view>
        </view>
        <view class="item-footer">
          <view class="footer-button" v-if="item.showPJBtn" @click="handleToUrl(`/minePackage/write-evaluation?orderId=${item.orderId}`)">评价</view>
          <view class="footer-button submit" v-if="item.showYYBtn && item.buyerAppointment=='0'" @click="handleToUrl(`/pages/family-doctor/invitation-submit?orderId=${item.orderId}`)">立即预约</view>
          <view class="footer-button submit" v-if="item.showYYBtn && item.buyerAppointment=='1'" @click="handleToDetail(item)">已预约</view>
          <view class="footer-button" @click="handleCancel(item)" v-if="item.showQXDDBtn">取消订单</view>
          <view class="footer-button submit" v-if="item.showLJFKBtn" @click="handlePay(item)">立即支付</view>
        </view>
      </view>
    </view>
    <view class="var-empty" v-else>
      <image src="@/static/mine/no-order.png" mode="aspectFill" class="img"></image>
      <view class="p">您还没有相关订单</view>
    </view>
  </view>
</template>

<script>
import { format } from '../utils/Tools';
  export default {
    data() {
      return {
        params:{
          page:1,
          pageSize:10
        },
        moreStatus:'more',
        tabsList:['全部','待付款','待收货','待使用','待评价','退款/售后'],
        curTabs:null,
        list:[]
      };
    },
    onLoad(ops) {
      this.curTabs = ops.tab || 0
    },
    onShow() {
      this.list = []
      this._initData({page:1})
    },
		onReachBottom() {
      if(this.params.total == this.params.pageSize){
        ++this.params.page;
        this._initData()
      }else{
        this.moreStatus="no-more"
      }
		},
    methods:{
      handleChangeTabs(idx){
        this.curTabs = idx;this._initData({page:1})
      },
      calcExpireTime(time){ //计算到期时间
        const date = new Date(time).getTime() - Date.now()
        return date>0?format(date,'m'):0
      },
      handleToUrl(url){
        uni.navigateTo({
          url
        })
      },
      handleToDetail(item){
        uni.verifyLogin()
        if(item.orderSource == '1'){
          this.$get(`/product/myOrder/orderDetail/${item.orderId}`,'',1).then(res=>{
            if(res.code == '1'){
              if(res.content.distributeType==1){
                const token = uni.getStorageSync('token')
                if(token){
                  uni.navigateTo({
                    url:`/pages/fineEngine/webView?url=${encodeURIComponent(`https://0.yahedso.com/i/#/orderSubPack/orderDetail/index?orderId=${item.orderId}&token=${token}&channel=${this.$channel}&t=${Date.now()}`)}`
                  })
                }
                return;
              }
              if(res.content.distributeType==3){
                uni.navigateTo({
                  url:`/minePackage/order-detail?id=${item.orderId}`
                })
                return;
              }
            }
          })
        }
      },
      handleCancel(e){  ///  取消订单
        uni.showModal({
          title:'确定取消付款?',
          content:'当前享受的优惠可能无法保留',
          success:async res=>{
            if(res.confirm){
              const ret = await this.$put(`/act/orders/cancel/${e.orderId}`)
              if(ret.code == '1'){
                this.$toast('取消成功','success')
                setTimeout(()=>{
                  this.orderList = []
                  this._initData()
                },1000)
              }else{
                this.$toast(ret.message)
              }
            }
          }
        })
      },
      async handlePay(e){   ///  立即支付
        const content = {
          appId:this.$mpAppid,
          openId:await uni.getOpenId(),
          orderId:e.orderId
        }
        this.$post('/order/users/orders/pay',content).then(ret=>{
          if(ret.code == '1'){
            let {content} = ret
            uni.requestPayment({
              timeStamp: content.timeStamp,
              nonceStr: content.nonceStr,
              package: content.package,
              signType: content.signType,
              paySign: content.paySign,
              success:res=>{
                uni.navigateTo({
                  url:`/pages/other/pay-result?id=${e.orderId}`
                })
              },
              fail:err=>{
                this.$toast('支付失败','none')
              }
            })
          }else{
            this.$toast(ret.message,'none')
          }
        })
      },
      
      ////      network
      _initData(e){
        const data = {
          ...this.params,
          status:this.curTabs,
          ...e
        }
        uni.showLoading({
          title:'加载中...'
        })
        this.$post(`/order/users/orders`,data,'1').then(res=>{
          if(res.code == '1'){
            this.list = [...this.list,...res.content]
            this.params.total = res.content.length
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.order-list{
  min-height: 100vh;
  background: var(--page-bg);
  .home-tabs{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-left: 24rpx;
    overflow-x: auto;
    .tabs-item{
      font-size: 28rpx;
      color: var(--title-color);
      position: relative;
      padding: 28rpx 0;
      margin-right: 44rpx;
      white-space: nowrap;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 34rpx;
        height: 6rpx;
        background: transparent;
        bottom: 14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
      &.active{
        font-weight: bold;
        color: var(--theme-color);
      }
      &.active::after{
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      }
    }
  } /// home-tabs end
  
  .list-main{
    padding: 0 24rpx;
    .main-item{
      margin-bottom: 20rpx;
      padding: 24rpx;
      background: #fff;
      border-radius: 20rpx;
      .item-header{
        display: flex;
        align-items: center;
        .img{
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
        }
        .header-h2{
          font-size: 24rpx;
          color: var(--title-color);
          margin-left: 8rpx;
          margin-right: auto;
          font-weight: bold;
        }
        .header-status{
          color: var(--sub-title);
          font-size: 24rpx;
        }
        .header-span{
          line-height: 28rpx;
          border-radius: 50rpx;
          background: #ffe4d4;
          color: var(--sub-theme);
          font-size: 18rpx;
          display: flex;
          align-items: center;
          overflow: hidden;
          padding-right: 10rpx;
          white-space: nowrap;
          .span-sub{
            background: var(--sub-theme);
            color: #fff;
            padding: 0 10rpx;
            margin-right: 8rpx;
            border-radius: 0 0 10rpx 0;
          }
        }
      }  /// item-header end
      .item-goods{
        display: flex;
        align-items: center;
        margin: 24rpx 0;
        .img{
          width: 124rpx;
          height: 124rpx;
          margin-right: 24rpx;
          border-radius: 20rpx;
        }
        .goods-info{
          .h2{
            font-size: 26rpx;
            font-weight: bold;
            color: var(--title-color);
          }
          .p{
            font-size: 22rpx;
            color: var(--sub-title);
            margin: 8rpx 0 30rpx 0;
          }
        }
      }
      .item-footer{
        display: flex;
        justify-content: right;
        align-items: center;
        .footer-button{
          line-height: 1;
          padding: 16rpx 20rpx;
          border: 2rpx solid var(--border-color);
          font-size: 24rpx;
          color: #6D6D6D;
          border-radius: 8rpx;
          margin-left: 20rpx;
          &:first-child{
            margin-left: auto;
          }
          &.submit{
            border-color: var(--theme-color);
            color: var(--theme-color);
          }
        }
      }
    }  /// main-item end
  }  /// list-main end
  
  .var-empty{
    .img{
      width: 132rpx;
      height: 132rpx;
    }
  }
}
</style>
